<template>
	<view class="detail page bgf5 fs14 c00 pt10" v-if="detail != null">
		<view class="px14 pb12 bgff">
			<view class="flex flexC flexB pt14">
				<text>订单编号：</text>
				<text>{{detail.order_no}}</text>
			</view>
			<view class="flex flexC flexB pt10">
				<text>订单状态</text>
				<text class="c57">{{detail.status_txt}}</text>
			</view>
			<view class="flex flexC flexB pt10">
				<text>店铺名称</text>
				<text>{{detail.shop_name}}</text>
			</view>
			<view class="flex flexC flexB pt10">
				<text>台号</text>
				<text>{{detail.table_name}}</text>
			</view>
			<view class="flex flexC flexB pt10">
				<text>订单时间</text>
				<text>{{detail.create_time_txt}}</text>
			</view>
			<view class="flex flexC flexB pt10">
				<text>开始时间</text>
				<text>{{detail.book_start}}</text>
			</view>
			<view class="flex flexC flexB pt10">
				<text>结束时间</text>
				<text>{{detail.book_end}}</text>
			</view>
			
			<view class="flex flexC fs16 c66 pt6" @click="callTel(detail.shop_mobile)">
				<text class="flex1 bold6">商家电话</text>
				<view class="bgf5 r2 mr3 flex flexC">
					<image class="w17" src="/static/img/icon/dh.png" mode="aspectFill"></image>
					<text class="c1b ml26">{{detail.shop_mobile}}</text>
				</view>
			</view>
			
		</view>
		<view class="bgff mt8 px14 pb20">
			<view class="flex flexC flexB borb py12">
				<text>订单金额</text>
				<text class="">￥{{detail.amount}}</text>
			</view>
			<view v-if="detail.tuan != null" class="flex flexC flexB borb py12">
				<text>团购券使用</text>
				<text class="">{{detail.tuan}}</text>
			</view>
			
			
			<view v-if="detail.mt_code != ''" class="flex flexC flexB borb py12">
				<text>美团券使用</text>
				<text class="">{{detail.mt_code}}</text>
			</view>
		
			<view v-if="detail.dou_code != ''" class="flex flexC flexB borb py12">
				<text>抖音券使用</text>
				<text class="">{{detail.dou_code}}</text>
			</view>
			<view  v-if="detail.ks_code != ''"   class="flex flexC flexB borb py12">
				<text>快手券使用</text>
				<text class="">{{detail.ks_code}}</text>
			</view>
			<view class="flex flexC flexB borb py12">
				<text>押金</text>
				<text class="cff0">￥{{detail.ya_amount}}</text>
			</view>
			<view class="flex flexC flexB borb py12">
				<text>余额抵扣</text>
				<text class="cff0">￥{{detail.balance}}</text>
			</view>
			<view class="flex flexC flexB  py12">
				<text>实付金额</text>
				<text class="cff0">￥{{detail.pay_amount}}</text>
			</view>
			
			<view class="aliC flex flexC flexJC mt22" >
				<button v-if="detail.status != 'done' && detail.status != 'refund'" @click="open" class="r40 cff btn fs16">开台</button>
				<button v-if="detail.status != 'done' && detail.status != 'refund' && detail.book_end == ''" @click="sureOver" class="r40 cff btn ml10 fs16">关台</button>
				<button v-if="detail.status == 'doing'" @click="xuOrder" class="r40 cff btn ml10 fs16" >续费</button>
			</view>
			
			<view class="aliC flex flexC flexJC mt22" >
				<button v-if="detail.status == 'doing'" @click="openDoor" class="r40 cff btn fs16">开大门</button>
				<button v-if="detail.is_comment == '1'" @click="clickComment"  class="r40 cff btn fs16">好评券续时</button>
				
			</view>
			
		</view>
		
		<!-- 续费弹框 -->
		<uni-popup type="center" ref="popupXufei">
			<xufei v-if="yu != null" :item="yu" @xufeiPay="xufeiPay" @closeYuding="closeYuding"></xufei>
		</uni-popup>
		
	</view>
</template>

<script>

	export default {
		data() {
			return {
				order_no: '',
				detail:null,
				mobile:'',
				share:-1,
				yu:null,
				is_xu:-1
			}
		},
		onLoad(option) {
			this.order_no = option.order_no;
			this.mobile = option.mobile;
			if(option.share){
				this.share = 1;
			}
			if(option.is_xu){
				this.is_xu = option.is_xu;
			}
			
		},
		
		onShow() {
			this.getDetail();
		},
		methods: {
			callTel(val){
				uni.showModal({
					content:'是否拨打商家电话',
					success(res) {
						if(res.confirm){
							uni.makePhoneCall({
								phoneNumber: val, // 要拨打的电话号码
								success: function () {
								  console.log('成功调起拨号盘');
								},
								fail: function (err) {
								  console.error('拨打电话失败', err);
								}
							});
						}
					}
				})
			},
			
			clickComment(){
				uni.navigateTo({
					url:'../discount/xuTableComment?id='+this.detail.id
				})
			},
			
			open(){
				let param = {
					order_no: this.order_no,
				};
				let that = this;
				this.$api.tableOpenAgain(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						this.getDetail();
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			
			openDoor() {
			
				if(this.detail.status == 'payed' || this.detail.status == 'doing'){
					let param = {
						order_no: this.order_no
					};
					let that = this;
					this.$api.tableOpenDoor(param).then(res => {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '此订单状态不对，不允许操作'
					})
				}
				
			
			},
			
			sureOver(){
				let that = this;
				uni.showModal({
					title:"提示",
					content:"您确认关台，结束以后不可再开台",
					confirmText:"确认",
					complete(res) {
						if(res.confirm){
							that.doOver();
						}
					}
				})
			},
			
			doOver(){
				
				let param = {
					order_no: this.order_no,
				};
				let that = this;
				this.$api.tableOverOrder(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						this.getDetail();
					} else if(res.code == 2){
						uni.navigateTo({
							url:'../order/huan?order_no='+that.order_no
						})
					} else {
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
				
			},
			
			closeYuding() {
				this.$refs.popupXufei.close();
			},
			
			xuOrder() {
				
				if(this.detail.status == 'doing'){
					let param = {
						order_no: this.order_no
					};
					let that = this;
					this.$api.tableXu(param).then(res => {
						console.info(JSON.stringify(res));
						if (res.code == 1) {
							that.yu = res.data;
							this.$refs.popupXufei.open();
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '此订单不需续单'
					})
				}
			},
			
			xufeiPay(item) {
				this.requestXu(item);
			},
			
			requestXu(item) {
				let param = {
					id: item.id,
					hour: item.hour
				};
				let that = this;
				this.$api.tableXuPay(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.closeYuding();
						that.order_no = res.data.order_no;
						if (res.data.payInfo != '') {
							that.wechatPay(res.data.payInfo)
						} else {
							uni.redirectTo({
								url: '../order/tableDetail?order_no=' + that.order_no
							})
						}
			
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
			
				})
			},
			
			wechatPay(payConfig) {
				let that = this;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payConfig.payTimeStamp,
					nonceStr: payConfig.paynonceStr,
					package: payConfig.payPackage,
					signType: payConfig.paySignType,
					paySign: payConfig.paySign,
					success: function(res) {
			
						uni.redirectTo({
							url: '../order/tableDetail?order_no=' + that.order_no
						})
			
					},
					fail: function(err) {
						console.info(err);
						that.restore();
						uni.showToast({
							title: "取消续费",
							icon: 'none'
						});
					}
				});
			},
			
			getDetail(){
				let param = {
					order_no: this.order_no,
				};
				let that = this;
				this.$api.tableOrderDetail(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.detail = res.data;
						if(that.is_xu == 1){
							
							that.xuOrder();
						}
					} else {
				
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	button{
		padding: 0;
	}
	.btn {
		background-color: #FABB22;
		width: 380rpx;
		height: 84rpx;
	}
	.w17 {width: 34rpx;height: 34rpx;}
</style>
